<template>
  <view class="textContainer">
    <view class="textTitle">
      <view class="titleFlag"></view><text>{{ title }}</text>
    </view>
    <view class="noCollect" v-if="!collectSon">
      <view class="noCollect_pic"></view>
      <button class="collectBtn" @click="clickCollect" v-if="personId">
        关注查看{{ positionName }}薪酬情况
      </button>
      <button
        class="collectBtn"
        v-else-if="isAuthSetting"
        @click="showLoginDialog"
        type="success"
      >
        关注查看{{ positionName }}薪酬情况
      </button>
      <button
        class="collectBtn"
        v-else
        open-type="getUserInfo"
        @getuserinfo="getUserInfo"
        :loading="getUserInfoLoading"
        type="success"
      >
        关注查看{{ positionName }}薪酬情况
      </button>
    </view>
    <view
      class="textContent"
      v-if="salaryRegionData.fiftyPercentile && collectSon"
    >
      <view class="salary">
        <view class="includeCity">
          <view class="title pl">月平均薪酬变化</view>
          <view class="citySelected" @click="chooseCity"
            >{{ currentRegion.label || '选择城市' }}<img :src="srcSalaryInfo" />
          </view>
        </view>
        <view class="salaryDataShow">
          <view class="middle"
            >月薪中位数
            <view class="blueMoney"
              >￥{{ salaryRegionData.fiftyPercentile || '-' }}</view
            >
          </view>
          <view class="middle line">|</view>
          <view class="middle"
            >环比上月
            <view class="blueMoney">{{
              PositiveNegative(salaryRegionData.ratio) || '-'
            }}</view>
          </view>
        </view>
        <ChartMonth :salaryRegionChart="salaryRegionChart"></ChartMonth>
        <view class="title">工作年限薪酬分布</view>
        <ChartYear :salaryWorkYearChart="salaryWorkYearChart"></ChartYear>
        <view class="title">不同学历薪酬分布</view>
        <ChartEducation
          :salaryEducationChart="salaryEducationChart"
        ></ChartEducation>
      </view>
    </view>
    <view
      v-if="!salaryRegionData.fiftyPercentile && collectSon"
      class="emptyLoading"
    >
      <Empty
        :baseImg="emptyImg"
        text="暂无数据，请重新选择城市"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
      <view class="reChoose">
        <view class="citySelected" @click="chooseCity"
          >{{ currentRegion.label || '选择城市' }}<img :src="srcSalaryInfo" />
        </view>
      </view>
    </view>
    <u-picker
      v-model="showRegion"
      mode="selector"
      :range="regionList"
      :default-selector="regionIndex"
      range-key="label"
      @confirm="regionConfirm"
    ></u-picker>

    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </view>
</template>
<script>
import WxLoginMixin from '@/mixins/wxLogin';

import ChartMonth from './charts/chartMonth';
import ChartYear from './charts/chartYear';
import ChartEducation from './charts/chartEducation';
import Empty from '@/components/Empty.vue';
import { getRegionList } from '@/api/modules/positionDictionary';
import { getLayerDetailsData, addToCollection } from '@/api/modules/career';
import LoginDialog from '@/components/LoginDialog';

export default {
  name: 'salarySolution',
  mixins: [WxLoginMixin],
  components: {
    ChartMonth,
    ChartYear,
    ChartEducation,
    Empty,
    LoginDialog
  },
  props: {
    positionId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    layerId: {
      type: String,
      default: null
    },
    isCollect: {
      type: Boolean,
      default: true
    },
    positionName: {
      type: String,
      default: '该职位'
    },
    personId: {
      type: String,
      default: ''
    }
    // isAuthSetting: { // wxLogin.js 已经混入了isAuthSetting
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      collectSon: false,
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      currentRegion: {}, //当前区域地址
      salaryRegionData: {
        fiftyPercentile: '0',
        ratio: null,
        list: []
      },
      salaryRegionChart: {},
      salaryWorkYearChart: {},
      salaryEducationChart: {},
      regionList: [],
      regionIndex: [0],
      showRegion: false,
      srcSalaryInfo:
        this.$imgBaseSelf +
        'career/positionDictionary/job_detail_salary_changed_triangle.png'
    };
  },
  created() {},
  mounted() {
    this.collectSon = this.isCollect;
    if (this.collectSon) {
      setTimeout(() => {
        this.getRegionList();
      }, 1000);
    }
  },
  methods: {
    handleJump(personId) {
      console.log('登录成功');
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      });
      this.personId = personId;
      this.getDetail();
      if (!this.collectSon) {
        this.clickCollect();
      }
    },
    clickCollect() {
      if (!this.personId) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      const params = {
        positionId: this.positionId,
        personId: this.personId,
        fromType: getApp().globalData.shareFrom
      };
      addToCollection(params).then((res) => {
        if (res.code == 200) {
          this.collectSon = true;
          this.$emit('collected');
          uni.showToast({
            title: '关注成功'
          });
          this.reportPositionCollect();
        } else {
          console.log('收藏失败', res);
        }
      });
    },
    PositiveNegative(str) {
      if (str && str != '') {
        if (str[0] != '-') {
          return '+' + str;
        }
      }
      return str;
    },
    getRegionList() {
      getRegionList({}).then((res) => {
        if (res.code == 200) {
          res.data.unshift({ label: '全部', value: '100000' });
          this.regionList = res.data;
          this.currentRegion = res.data[0];
          this.regionConfirm([0]);
        }
      });
    },
    chooseCity() {
      this.showRegion = true;
    },
    regionConfirm(e) {
      this.regionIndex = e;
      this.currentRegion = this.regionList[e[0]];
      this.salaryRegionData = {
        fiftyPercentile: '0',
        ratio: null,
        list: []
      };
      this.getThreeChartsData();
    },
    getThreeChartsData() {
      const params = {
        id: this.positionId,
        // layerIds: "41",
        layerIds: this.layerId,
        regionIds: this.currentRegion.value
      };
      getLayerDetailsData(params).then((res) => {
        if (res.code == 200) {
          // console.log("res", res);
          let dataList = res.data[0].children[0].children;
          // console.log("dataList", dataList);
          this.salaryRegionData = dataList[0].data;
          this.salaryRegionChartFormat(dataList[0].data.list);
          this.salaryWorkYearEducationChartFormat(
            dataList[1].data,
            'expCodeStr'
          );
          this.salaryWorkYearEducationChartFormat(dataList[2].data, 'eduName');
        } else {
          console.log('请求失败');
        }
      });
    },
    salaryWorkYearEducationChartFormat(list, yName) {
      let result = {
        dataX: [],
        dataY: []
      };
      list.forEach((lis) => {
        result.dataX.push(lis[yName]);
        result.dataY.push(Math.floor(lis.salaryNum));
      });
      if (yName == 'expCodeStr') {
        // console.log("-------salaryWorkYearChart-------->result", result);
        this.salaryWorkYearChart = result;
      } else {
        this.salaryEducationChart = result;
      }
    },
    salaryRegionChartFormat(list) {
      let result = {
        dataX: [],
        dataY: []
      };
      list.forEach((lis) => {
        result.dataX.push(lis.month + '\n' + lis.year);
        result.dataY.push(Math.floor(lis.salaryNum));
      });
      this.salaryRegionChart = result;
      // console.log("this.salaryRegionChart", this.salaryRegionChart);
    },
    showLoginDialog() {
      console.log('showLoginDialog', this.personId);
      if (this.personId) {
        if (!this.isCollect) {
          this.clickCollect();
        } else {
          this.$emit('onLoginSuccess');
        }
      } else {
        this.$refs.loginDialog.setVisibility(true);
      }
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
      console.log('loginSuccessBack', this.personId);
      this.$emit('onLoginSuccess');
    }
  },
  watch: {
    isCollect: function (newVal, oldVal) {
      this.collectSon = this.isCollect;
      if (newVal) {
        this.getRegionList();
      } else {
        this.salaryRegionChart = {};
        this.salaryWorkYearChart = {};
        this.salaryEducationChart = {};
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.textContainer {
  margin: 24rpx 16rpx 0 16rpx;
  padding: 34rpx 0rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .textTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 44rpx;
    padding: 0 24rpx;

    .titleFlag {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }
  }

  .textContent {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 48rpx;
    white-space: pre-wrap;
    overflow: hidden;
    margin-top: 22rpx;

    .salary {
      position: relative;
      margin-top: 10rpx;

      .includeCity {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0rpx 34rpx;

        .pl {
          padding: 0 0;
        }
      }

      .title {
        font-size: 32rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #333333;
        padding: 0 34rpx;
      }

      .salaryDataShow {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999999;
        font-size: 26rpx;
        font-weight: 400;
        margin-top: 34rpx;
        padding: 0 44rpx;

        .middle {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 30rpx;

          .blueMoney {
            color: #066bff;
            font-size: 36rpx;
            font-weight: bold;
          }
        }

        .line {
          font-size: 40rpx;
          line-height: 40rpx;
          color: #e5e5e5;
        }
      }
    }
  }
}

.citySelected {
  display: flex;
  align-items: center;
  // padding: 0 44rpx;
  font-size: 24rpx;
  color: #888888;
  background: #f6f6f6;
  padding: 16rpx;
  border-radius: 12rpx;
  display: flex;
  line-height: 36rpx;

  img {
    margin-left: 8rpx;
    width: 14rpx;
    height: 14rpx;
  }
}

.reChoose {
  top: 0;
  right: 32rpx;
  position: absolute;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #888888;
  padding-bottom: 20rpx;
}

.echarts-wrap {
  width: 100%;
  margin-top: 12rpx;
}

.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.noCollect {
  padding: 24rpx 16rpx;
  padding-bottom: 0rpx;

  .noCollect_pic {
    width: 100%;
    height: 610rpx;
    background: url($img-base + 'career/positionDictionary/salaryDefault.png');
    background-size: 100% auto;
  }

  .collectBtn {
    height: 72rpx;
    background: #ff6d31;
    box-shadow: 0rpx 12rpx 20rpx 0rpx rgba(25, 13, 2, 0.15);
    border-radius: 36rpx;
    border: 2rpx solid #ffffff;
    color: #fff;
    line-height: 72rpx;
    font-weight: bold;
    font-size: 28rpx;
    letter-spacing: 2rpx;
  }
}
</style>
